<template>
  <div class="wechaPayment">
    <van-nav-bar
      title="微信支付"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="wechaPayment_items">
      <div class="wechaPayment_item"><van-cell title="绑定微信"   is-link size="large" right-icon="@" @click="pushPayBind"/></div>
      <div class="wechaPayment_item"><van-cell title="已绑定"   is-link size="large" right-icon="@" :value="phone | phoneFilter" @click="$router.push('/wechatPayment')"/></div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      phone:''
    }
  },
  methods:{
    onClickLeft(){
      this.$router.push('/profile/paymentSet')
    },
    getPhone(){
      this.phone = this.$store.state.userInfo.phone_number
    },
    pushPayBind(){
      this.$router.push('/paymentBinded');
    }
  },
  created(){
    this.getPhone()
  },
  filters:{
    phoneFilter(value){
      if(value==null) return ' '
      var showPhone =  value.replace(/^(\d{3})\d{4}(\d+)/,"$1****$2")
      return showPhone
    }
  }
}
</script>

<style lang="less">
.van-nav-bar__arrow {
    margin-right: 4px;
    font-size: 25px;
  }
  .van-nav-bar__title {
    max-width: 60%;
    margin: 0 auto;
    color: #323233;
    font-weight: 500;
    font-size: 20px;
  }
  .van-nav-bar .van-icon {
    color: #151515;
  }
  .wechaPayment_items{
    margin-top: 10px;
    .wechaPayment_item{
      margin-top: 5px;
    }
  }
</style>